<template>
  <div>
    <el-row class="iconbox">
      <!-- <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
      </el-tooltip> -->
      <el-tooltip v-show="showOptArr.indexOf('refresh') > -1" class="item" effect="dark" content="刷新" placement="top">
        <i class="el-icon-refresh-right" @click="refresh()" />
      </el-tooltip>
      <el-tooltip v-if="columns" v-show="showOptArr.indexOf('showColumn') > -1" class="item" effect="dark" content="列设置" placement="top">
        <!-- <svg-icon icon-class="choose" @click="showColumn()" /> -->
        <i class="el-icon-setting" @click="showColumn()" />
      </el-tooltip>
      <el-tooltip v-show="showOptArr.indexOf('fullScreen') > -1" class="item" effect="dark" :content="showSearch ? '全屏' : '取消全屏'" placement="top">
        <svg-icon v-if="!screenflag" icon-class="full-screen" @click="handleFullScreenClick()" />
        <svg-icon v-else icon-class="quanjusuoxiao" @click="handleFullScreenClick()" />
      </el-tooltip>
    </el-row>
    <el-drawer
      lock-scroll
      :modal-append-to-body="false"
      append-to-body
      class="avue-dialog"
      :title="'列设置'"
      :visible.sync="open"
      :before-close="handleClose"
    >
      <!-- @opened="init" -->
      <el-table
        :key="Math.random()"
        :data="columns"
        size="small"
        border
        class="columnTable"
        :header-cell-style="{background:'#F2F6FC'}"
      >
        <el-table-column
          align="center"
          width="50"
          header-align="center"
          type="index"
          label="#"
        />
        <el-table-column
          key="label"
          align="center"
          width="100"
          header-align="center"
          prop="label"
          :label="'列字段'"
        />
        <template v-for="(item) in defaultColumn">
          <el-table-column
            v-if="item.hide!=true"
            :key="item.prop"
            :prop="item.prop"
            align="center"
            header-align="center"
            :label="item.label"
          >
            <template slot-scope="{row}">
              <!-- <el-checkbox v-model="crud.objectOption[row.prop][item.prop]" /> -->
              <el-checkbox v-model="objectOption[row.prop][item.prop]"  :disabled="item.prop=='columnSearch'&&['color','rate','image','fileupload'].includes(objectOption[row.prop].type)" />
              <!-- <el-checkbox v-model="objectOption[row.prop][item.prop]"/>/ -->
            </template>
          </el-table-column>
        </template>

      </el-table>
    </el-drawer>
  </div>
</template>
<script>
// import config from './config.js'
// import locale from 'core/locale'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'
export default {
  name: 'DtDialogColumn',
  // mixins: [locale],
  inject: {
    showOptArr: { // 处理显示几个按钮
      default: () => {
        return ['refresh', 'showColumn', 'fullScreen']
      }
    }
  },
  mixins: [dialogColumn],
  props: {
    value: [Boolean],
    showSearch: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableRef: {
      type: [Array, Object],
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      open: false,
      bindList: {},
      list: [],
      objectOption: {},
      screenflag: false
    }
  },
  computed: {
    defaultColumn() {
      return [{
        label: '显示',
        prop: 'show'
      }, {
        label: '固定',
        prop: 'fixed'
      }, {
        label: '过滤',
        prop: 'filters',
        hide: true
      }, {
        label: '排序',
        prop: 'sortable'
      }, {
        label: '列筛选',
        prop: 'columnSearch',
        hide: this.$attrs['is-column-search'] !== false
      }, {
        label: '顺序',
        prop: 'index',
        hide: true
      }, {
        label: '宽度',
        prop: 'width',
        hide: true
      }]
    }
  },
  watch: {
    value: {
      handler: function(newVal, oldVa) {
        // this.show = newVal
      },
      immediate: true,
      deep: true
    },
    open: {
      handler (val) {
        if (val) {
          this.columns = this.columns.filter((item) => { return item.developerShow != false })
          let list = this.columns.filter((item) => { return item.show })
          this.objectOption = {}
          this.columns.forEach(ele => this.objectOption[ele.prop] = ele)
        }
      },
      deep: true
    },
    columns: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.tableRef.doLayout()
        })
      },
      deep: true
    }
  },
  methods: {
    handleClose(done){
      done();
      //关闭时触发
      this.$emit('close')
    },
    // 搜索
    toggleSearch() {
      this.$emit('update:showSearch', !this.showSearch)
    },
    // 刷新
    refresh() {
      this.$emit('queryTable')
    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true
      // this.dealDialogColumnData()
    },
    handleFullScreenClick() {
      this.screenflag = !this.screenflag
      if (this.$parent.$el.className.indexOf('table-fullscreen') > -1) {
        if (this.$parent.$el.className.indexOf('ele-table-fullscreen') > -1) {
          this.$parent.$el.classList.remove('ele-table-fullscreen')
        } else {
          this.$parent.$el.classList.add('ele-table-fullscreen')
        }
      } else {
        if (this.$parent.$el.getElementsByClassName('ele-table-fullscreen')[0]) {
          this.$parent.$el.getElementsByClassName('table-fullscreen')[0].classList.remove('ele-table-fullscreen')
        } else {
          this.$parent.$el.getElementsByClassName('table-fullscreen')[0].classList.add('ele-table-fullscreen')
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.columnTable{
  width: 93%;
  margin: 0 auto;
  border-left: 1px solid #dfe6ec !important;
}

</style>
